HTML 标签使用总结

元素是 HTML 的基石，它们描述了网页的结构和内容。它们是超文本标记语言（HyperText Markup Language）的“标记”（Markup）部分。

HTML 语法使用尖括号（“ ”）包裹 HTML 元素的名称。元素通常具有一个开始标签和一个结束标签，标签之间是元素包含的内容。两者之间的区别在于，结束标记带有一个正斜杠。

让我们看一些 HTML 标签的示例。

标签代表段落，这是用于在 HTML 文档中创建文本行的最常见的标签。

的使用与其他标签兼容，可以在它包含的内容中添加超链接（）和粗体（）文本。

This is a paragraph. It is the first of many.

This is another paragraph. It will appear on a separate line.

你也可以将锚元素 嵌套在段落中。

Here's a link to freeCodeCamp.

有六个标题元素——、、、、、。

标题元素用于表示其下方内容的重要性。标题的数字越小，内容的重要性越高。

例如， 元素表示页面的主标题，并且每页应该只有一个。这有助于搜索引擎了解页面的主要主题。 元素的重要性较低，低于较高级别的 元素。

锚点（）元素创建指向另一个页面或文件的超链接。为了链接到其他页面或文件， 标记还必须包含 href 属性，该属性指示链接的目标。

开头和结束的 标签之间的文本就是链接。该文本应该是对链接目标的有意义的描述，而不是诸如“单击此处”之类的通用短语。使用屏幕阅读器的用户可以更好地在页面上的各个链接之间导航，并了解每个链接到的内容。

默认情况下，除非指定了另一个目标，否则链接页面将在当前浏览器窗口中显示。默认链接样式如下：

你也可以创建一个链接，指向同一个页面的另一个部分：

把 标签放在 标签中，可以把图像也变成一个链接：

HTML 中有两种主要的列表：有序列表（）和无序列表（）。所有列表都包含至少一个列表元素（）。

无序列表以 标签开头，用 标签罗列项目。默认情况下，在无序列表中，所有罗列的项目都有项目符号。

输出：

有序列表以 标签开头，用 标签罗列项目。默认情况下，在有序列表中，所有罗列的项目都有数字标记。

输出：

元素用于强调 HTML 文档中的文本。这可以通过将要强调的文本分别包含在 标签和 标签中来完成。大多数浏览器会把包含在 标签中的文本渲染为斜体。

注意： 标签不应用于在样式上以斜体显示文本。 标签用于强调文本。通常，需要用 CSS 格式在样式上将文本显示为斜体。

Text that requires emphasis should go here.

元素用于表示以某种方式与其周围文本分开的文本。在默认情况下，用 标签括起来的文本将以斜体显示。

在以前的 HTML 规范中， 标签仅用于表示要斜体显示的文本。但是，在现代语义 HTML 中，应在适当的地方使用诸如 和 之类的标签。

你可以使用 元素的 class 属性来说明为什么标签中的文本与周围的文本不同。 你可能要显示该文本或短语是另一种语言的：

The French phrase esprit de corps is often used to describe a feeling of group cohesion and fellowship.

元素用于具有重要性或紧急性的文本。大部分浏览器将 元素包裹的文本渲染为加粗。

注意： 标签不应用于将文本加粗。应使用 CSS 样式来加粗文本。

This is really important.

一个简单的 HTML 元素可以这样放在 HTML 文档中：

注意， 元素是自闭合的，不需要结束标签。

alt 标签为图像提供替代文本。alt 标签的一个作用是为使用屏幕阅读器的视觉受损用户提供便利。这些用户可以通过阅读 alt 标签，来理解图像的含义。

title 属性是可选的，提供图像的额外信息。当用户将鼠标悬停在图像上时，大部分浏览器会在提示框中显示此信息。

注意，图像文件的路径可以是相对的，也可以是绝对的。同时，记住 img 元素是自闭合的，也就是说它不需要一个 标签，只需要用一个 > 闭合。

（HTML 文件在 https://example.com/index.html，和图像文件在同一个文件夹中。）

等同于：

有时候， 元素也会使用另外两个属性来定义它的尺寸，height 和 width，如下所示：

值以像素为单位，但是大小通常以 CSS 而不是 HTML 指定。

元素用于导航链接的主要部分。并非文档的所有链接都应在 元素内。浏览器（例如，供残障用户使用的屏幕阅读器）可以使用这个元素来确定是否忽略某个内容的初始呈现。

标签是用于导航链接或介绍性内容的容器。它通常包括标题元素，例如 、，也可以包括搜索表单、徽标、作者信息等其他元素。

尽管不是必需的，但 标签旨在包含各个部分的标题。它可以在 HTML 文档中被多次使用。重要的是，注意 标签不会引入新的部分，它只是表示一个部分的开头。

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

HTML 标签允许你输入一个包含用于用户反馈或交互的文本的框。在大多数情况下，通常会将 用作表单的一部分。

程序员使用 标签创建用于用户输入的多行字段（特别是在用户应在表单上输入较长文本的情况下，这个标签很有用）。程序员可以为 标签指定不同的属性。

最常见的属性：row 和 cols属性确定 textarea 的高度和宽度。placeholder 属性指定用户可见的文本，它有助于用户了解应键入哪些数据。maxlength 确定可以在 textarea 中键入的文本的最大长度，用户不能提交超出这个长度的字符。required 属性意味着必须在提交表单之前填写此字段。

标签定义一个 元素的标签。

通过使用 “for” 属性，或将这个元素放置在元素内，可以将 绑定到元素。

你可以看到，标记的 for 属性应等于相关元素的 id 属性，以将它们绑定在一起。

标签在 HTML 中支持全局属性。

标签在 HTML 支持 Event 属性。

元素不会呈现给用户任何特殊的东西。但是，它为鼠标用户提供了可用性改进，因为如果用户单击元素内的文本，它将切换控件。

标签提供 HTML 文档的元数据。

元数据用于指定页面的字符集、描述、关键字、作者和页面的视口。

元数据不会出现在网站本身上，但是浏览器和搜索引擎将使用它来确定页面如何显示内容，并评估搜索引擎优化（SEO）。

标签是一个通用容器，用于定义 HTML 文档中的部分。 元素用于将 HTML 元素的各个部分组合在一起，并使用 CSS 格式化它们。 是块级元素，这意味着它在屏幕上占据了自己的一行。 之后的元素将被推到下面的行。

对于不是块级而是内联的类似分组和样式，应使用 标签，它用于对文档中的行内元素进行分组。

这个例子展示如何将某个部分设置为一样的颜色：

my paragraph

元素定义了一个部分，其中没有更具体的语义 HTML 元素来表示它。通常，一个 元素将包括一个标题元素（ - ）作为子元素。

例如，网页可以分为多个部分，例如欢迎、内容和联系部分。

如果需要通用容器，则不应使用 元素代替 元素。 元素应该用于定义 HTML 页面中的部分。

Bunch of awesome content

标签表示 HTML 文档或部分（section）的页脚。通常，页脚包含有关作者的信息、版权信息、联系信息和站点地图。 标签内的任何联系信息都应放在 标签内。

© 2017 Joe Smith

标签定义一个音频元素，该元素可用于将音频媒体资源添加到 HTML 文档中，该文档将由对浏览器（而非浏览器插件）内置的音频播放的本机支持来播放。

音频标签当前支持三种文件格式，OGG、MP3 和 WAV，可以将其添加到 HTML 中，如下所示：

它可能包含一个或多个使用 src 属性或 source 元素表示的音频源。

HTML 元素表示一个内联框架，该框架允许你将独立的 HTML 文档包含到当前 HTML 文档中。 通常用于嵌入第三方媒体、你自己的媒体、窗口小部件、代码段，或嵌入第三方小程序（例如付款表格）。

下方列出 的一些属性：

标签用于在设置的空间内将现有网页或应用添加到你的网站。

使用 标签时，应该使用 src 属性来指示要在框架中使用的网页或应用的位置。

你可以设置 width 和 height 属性来设置框架的尺寸。

默认具有边框，如果你希望删除它，则可以使用 style 属性，将 CSS border 属性设置为 none 来删除。

用 嵌入一个 YouTube 视频：

用 嵌入 Google Maps：

如果观看者的浏览器不支持 iframes，则 开始标签和结束标签之间的内容将用作替代文本。

Your browser does not support iframes.

任何锚点元素都可以定位 元素的内容。它将重定向 ，而不是将浏览器窗口重定向到链接的网页。 为此， 元素的 target 属性必须与 的 name 属性匹配。

Redirect the Iframe

这个例子首先会显示一个空的 ，然后，当你点击它上面的链接，它将重定向 ，显示一个 YouTube 视频。

嵌入 中的文档可以照常在自己的上下文中运行 JavaScript（而不影响上级网页）。

上级网页与嵌入 内容之间的任何脚本交互都应遵循同源政策。这意味着，如果你从其他域名加载 内容，浏览器将阻止任何使用 JavaScript 访问该内容的尝试。

原文：HTML Elements Explained: What are HTML Tags and How Do You Use Them?